<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-input v-model="params.name" size="mini" placeholder="筛选关键字"
                          style="width: 160px;"></el-input>
                <el-button type="primary" size="mini" @click="getList">查询</el-button>
                <el-button type="primary" size="mini" @click="centerDialogVisible=true">添加歌单</el-button>
                <el-button type="danger" size="mini" @click="deleteHandle()">批量删除</el-button>
            </div>
        </div>
        <el-table size="mini" border width="100px"
                  :data="dataList" @selection-change="selectionChangeHandle">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column label="歌单图片" width="110" align="center">
                <template slot-scope="scope">
                    <div class="singer-img">
                        <img :src="getUrl(scope.row.pic)"
                             style="width: 100%" alt="歌单图片">
                        <el-upload :action="uploadUrl(scope.row.id)"
                                   :before-upload="handleAvatarUpload"
                                   :on-success="handleAvatarSuccess"
                                   :show-file-list="false">
                            <el-button size="mini">更新图片</el-button>
                        </el-upload>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="120px" align="center"></el-table-column>
            <el-table-column prop="style" label="风格" width="120px" align="center"></el-table-column>
            <el-table-column prop="introduction" label="简介">
                <template slot-scope="scope">
                    <p class="introduction">
                        {{scope.row.introduction}}</p>
                </template>
            </el-table-column>
            <el-table-column label="歌曲管理" width="100px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="ListSongEdit(scope.row.id,scope.row.name)">歌曲管理</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editHandle(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="params.currPage"
                :page-sizes="[5, 10, 50, 100]"
                :page-size="params.pageSize"
                :total="params.totalCount"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <el-dialog title="添加歌单" :visible="centerDialogVisible" center width="400px"
                   @close="closeDialog">
            <el-form :model="form" ref="formRef" label-width="80px">
                <el-form-item prop="title" label="歌单名" size="mini">
                    <el-input v-model="form.title" placeholder="歌单名"></el-input>
                </el-form-item>
                <el-form-item prop="style" label="风格" size="mini">
                    <el-input v-model="form.style" placeholder="风格"></el-input>
                </el-form-item>
                <el-form-item prop="introduction" label="简介" size="mini">
                    <el-input v-model="form.introduction" placeholder="简介" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button size="mini" @click="closeDialog">取消</el-button>
                <el-button size="mini" @click="saveOrUpdateSongList">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    // 歌单管理
    import {deleteSongList, getSongListInfo, getSongLists, saveOrUpdateSongList} from '../api/index'
    import {mixin} from '../mixins/index'

    export default {
        mixins: [mixin],
        data() {
            return {
                centerDialogVisible: false,
                form: {
                    id: '',
                    title: '',
                    style: '',
                    // pic: '',
                    introduction: ''
                },
                dataList: [],
                tempList: [],
                params: {
                    currPage: 1,     //当前页
                    pageSize: 5,   //每页大小
                    totalCount: 1,//总记录数
                    name: '',    //查询条件
                    isPage: true //开启分页
                },
                dataListSelections: [],
            }
        },
        watch: {
            //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
            //页面搜索 分页后需要使用服务器搜索
            select_word: function () {
                //不采用该方法
                if (this.params.name === '') {
                    this.dataList = this.tempList
                } else {
                    this.dataList = []
                    for (let item of this.tempList) {
                        if (item.name.includes(this.params.name)) {
                            this.dataList.push(item)
                        }
                    }
                }
            }
        },
        methods: {
            //获取歌单列表
            getList() {
                let params = {
                    'isPage': this.params.isPage,
                    'name': this.params.name,
                    'page': this.params.currPage,
                    'limit': this.params.pageSize,
                }
                getSongLists(params).then(({data: res}) => {
                    this.dataList = res.data.list
                    // this.tempList = res.data.
                    this.params.totalCount = res.data.totalCount
                })
            },
            //关闭 保存或更新对话框
            closeDialog() {
                this.centerDialogVisible = false
                this.$refs.formRef.resetFields()
            },
            //保存或更新歌单
            saveOrUpdateSongList() {
                saveOrUpdateSongList(this.form).then(({data: res}) => {
                    if (res.code === 0) {
                        this.notify('成功', 'success')
                        this.closeDialog()
                        this.getList()
                    } else
                        this.notify('失败', 'error')
                })
            },
            //获得上传图片地址
            uploadUrl(id) {
                //从Vuex中获取图片上传的服务器ip
                return `${this.$store.state.HOST}/songList/updateSongListPic?id=${id}`
            },
            //图片更新成功处理器
            handleAvatarSuccess(res, file) {
                if (res.code === 0) {
                    this.getList()
                    this.notify('上传成功', 'success')
                } else {
                    this.notify('上传失败', 'error')
                }
            },
            //图片更新前处理器
            handleAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
                if (!isJPG) {
                    this.$message.error('上次头像图片只能是jpg或png格式')
                    return false
                }
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                    return false
                }
                return isJPG && isLt2M
            },
            editHandle(id) {
                getSongListInfo(id).then(({data: res}) => {
                        if (res.code === 0) {
                            this.form = res.info
                            this.centerDialogVisible = true
                        } else {
                            this.$message.error('请稍后重试')
                        }
                    }
                )
            },
            //删除
            async deleteHandle(id) {
                console.log(id)
                let ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                const {data: res} = await deleteSongList(ids)
                if (res.code === 0) {
                    this.getList()
                    this.$message.success('删除成功')
                } else {
                    return this.$message.error('删除失败')
                }
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            //每页大小修改
            sizeChangeHandle(val) {
                this.params.pageSize = val
                this.params.currPage = 1
                this.getList()
            },
            //当前页修改
            currentChangeHandle(val) {
                this.params.currPage = val
                this.getList()
            },
            //歌单的歌曲编辑(歌单id,歌单名)
            ListSongEdit(id, name) {
                this.$router.push({path: '/ListSong', query: {id, name}})
            }
        },
        created() {
            this.getList()
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .singer-img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        margin-bottom: 5px;
        overflow: hidden;
    }

    .introduction {
        height: 100px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    /*隐藏滚动条*/
    .introduction::-webkit-scrollbar {
        display: none;
    }
</style>